<template>
  <div class="container">
    <div>
      <i-tabs :current="current" @change="handleChange"  color="#19be6b">
        <i-tab key="tab1" title="句子"></i-tab>
        <i-tab key="tab2" title="主题"></i-tab>
      </i-tabs>
    </div>
    <div>

<!--      句子收藏列表-->
      <div v-if="current === 'tab1'">
        <i-cell-group>
          <div v-for="(item, index) in sentenceCollectionArr" style="background:#ffffff" @tap="toEvaluation(item.sentenceId)" :key="index">
            <i-cell>
              <p style="font-size: 15pt; color: #000000">{{item.sentenceContent}}</p>
              <div style="margin-top: 20rpx">
                <i-row style="font-size: 11pt; color: #888888;">
                  <i-col span="18">
                    <div ><i-icon type="activity" size="18" color="#80848f"/>{{item.updateAtFormat}}</div>
                  </i-col>
                  <i-col span="6" @click.stop>
                    <i-icon style="margin-left: 100rpx" type="delete_fill" size="25"  class="delete" @tap="delcon(item, index, item.sentenceId)"/>
                  </i-col>
                </i-row>
              </div>
            </i-cell>
          </div>
        </i-cell-group>
      </div>

<!--      主题收藏列表-->

      <div v-else>
        <i-cell-group>
          <div v-for="(item, index) in themeCollectionArr" @tap="toThemeDetail(item.topicId)" :key="index" style="background:#ffffff">
            <i-cell>
              <p style="font-size: 15pt; color: #000000">{{item.topicName}}</p>
              <div style="margin-top: 20rpx">
                <i-row style="font-size: 11pt; color: #888888;">
                  <i-col span="18">
                    <div ><i-icon type="activity" size="18" color="#80848f"/>{{item.updateAtFormat}}</div>
                  </i-col>
                  <i-col span="6" @click.stop>
                    <i-icon style="margin-left: 100rpx" type="delete_fill" size="25"  class="delete" @tap="delconTheme(item, index, item.topicId)"/>
                  </i-col>
                </i-row>
              </div>
            </i-cell>
          </div>
        </i-cell-group>
      </div>
    </div>
  </div>
</template>


<script>
  import mpSearchbar from 'mpvue-weui/src/searchbar'
  import mpToast from 'mpvue-weui/src/toast'
  import {mapState} from 'vuex'
  export default {
    data () {
      return {
        URL: this.GLOBAL.apiUrl, // 服务器地址
        sentenceCollectionArr: [], // 存放收藏句子的数组
        themeCollectionArr: [], // 存放收藏主题的数组
        current: 'tab1' // 标识选项卡
      }
    },
    computed: {
      ...mapState([
        'userId' // 从vuex中获取userId
      ])
    },
    beforeMount () {
      // 挂载前获取用户收藏记录
      let _that = this
      wx.request({
        url: _that.URL + 'collection/getMyCollectionBySentenceId',
        method: 'POST',
        data: {
          userId: _that.userId
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success (res) {
          let sentenceCollectionArr = res.data.data
          _that.sentenceCollectionArr = sentenceCollectionArr
        }
      })
      wx.request({
        url: _that.URL + 'collection/getMyCollectionByTopicId',
        method: 'POST',
        data: {
          userId: _that.userId
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success (res) {
          let themeCollectionArr = res.data.data
          _that.themeCollectionArr = themeCollectionArr
        }
      })
    },
    components: {
      mpToast,
      mpSearchbar
    },
    methods: {
      delcon: function (e, index, sid) {
        // 取消某一句子的收藏并发送删除收藏的信号
        var list = this.sentenceCollectionArr
        wx.showModal({
          title: '是否取消收藏？',
          success: res => {
            if (res.confirm) {
              list.splice(index, 1)
            }
          }
        })
        let _that = this
        wx.request({
          url: _that.URL + 'collection/removeCollection',
          method: 'POST',
          data: {
            userId: _that.userId,
            sentenceId: sid,
            topicId: 0
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          }
        })
      },
      delconTheme: function (e, index, tid) {
        // 取消某一主题的收藏并发送删除收藏的信号
        var list = this.themeCollectionArr
        wx.showModal({
          title: '是否取消收藏？',
          success: res => {
            if (res.confirm) {
              list.splice(index, 1)
            }
          }
        })
        let _that = this
        wx.request({
          url: _that.URL + 'collection/removeCollection',
          method: 'POST',
          data: {
            userId: _that.userId,
            sentenceId: 0,
            topicId: tid
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          }
        })
      },
      toThemeDetail (topicId) {
        // 跳转到主题详情页
        wx.navigateTo({
          url: '/pages/theme_detail/main?topicId=' + topicId
        })
      },
      toEvaluation (sid) {
        // 跳转到句子测评页
        wx.navigateTo({
          url: '/pages/evaluation/main?sid=' + sid
        })
      },
      handleChange (detail) {
        // 判别选项卡tab
        console.log(detail.target.key)
        this.current = detail.target.key
      }
    }
  }
</script>

<style scoped>

</style>
